<template>
  <div class="treeSelect">
    <el-input class="tree-input" placeholder="输入关键字进行过滤" v-model="filterText">
    </el-input>
    <el-tree class="filter-tree" :data="data" :default-expand-all="expand" :props="defaultProps"
      @node-click="selectedNode" :filter-node-method="filterNode" ref="tree"></el-tree>
  </div>
</template>

<script>
  export default {
    name: 'TreeSelect',
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    props: {
      data: {
        type: Array,
        required: true,
        default: () => []
      },
      expand: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      selectedNode(data) {
        this.filterText = ''
        this.$emit('selected', data);
        document.body.click()
      },
      reset() {
        this.filterText = ''
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    data() {
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<style scoped lang="scss">
  .treeSelect {
    padding: 0 10px 10px 10px;
    background-color: #FFFFFF;
  }

  .tree-input{
    position: fixed;
    z-index: 2;
    padding-top: 10px;
    background: #FFFFFF;
  }

  .filter-tree {
    padding-top: 46px;
    // max-height: 400px;
    overflow-y: scroll;
    z-index: 1;
  }
</style>

<style lang="scss">
  .treeSelect {
    .el-tree-node__content {
      &:hover {
        color: #FFFFFF;
      }
    }
  }
</style>
